<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="searchForm">
				<el-form-item>
					<el-input v-model="searchForm.keyword" placeholder="关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUserProducts">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleConsum">用户消费</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="userProducts" highlight-current-row v-loading="listLoading" @selection-change="selsChange"  style="width: 100%;">
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-table :data="props.row.consumLogs" style="width: calc(100% - 47px)" class="two-list">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column type="index" width="60">
						</el-table-column>
						<el-table-column prop="productName" label="服务名"></el-table-column>
						<el-table-column prop="username" label="用户名"></el-table-column>
						<el-table-column prop="shopName" label="店铺名"></el-table-column>
						<el-table-column prop="consumNum" label="消费次数"></el-table-column>
						<el-table-column prop="consumTime" label="消费时间"></el-table-column>
					</el-table>
				</template>
			</el-table-column>
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="username" label="用户名" >
			</el-table-column>
			<el-table-column prop="phone" label="用户电话" >
			</el-table-column>
			<el-table-column prop="productName" label="服务名称" >
			</el-table-column>
			<el-table-column prop="productPrice" label="服务价格" >
			</el-table-column>
			<el-table-column prop="buynum" label="购买数量"  >
			</el-table-column>
			<el-table-column prop="balancenum" label="剩余数量"  >
				<template scope="scope" >
					<span style="color: blue;font-weight: bold">{{scope.row.balancenum}}</span>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑 新增 界面-->
		<el-dialog :title="title" :visible.sync="editFormVisible" :close-on-click-modal="false">

			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="用户电话" prop="phone">
					<el-input v-model="editForm.phone" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="验证码" prop="verifyCode">
					<el-input v-model="editForm.verifyCode" auto-complete="off" style="width: 150px"></el-input>
					<el-button type="primary" :disabled="verifyCodeDisable" @click="getVerifyCode">获取验证码</el-button>
					<el-tag type="danger">如果按钮不能使用！请等待，因为两次发送必须间隔1分钟!</el-tag>
				</el-form-item>
				<el-form-item label="剩余次数" prop="balancenum">
					<el-input v-model="editForm.balancenum" auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="消费次数" prop="consumnum">
					<el-input v-model="editForm.consumnum" auto-complete="off"></el-input>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="consumProdut" :loading="editLoading">确认</el-button>
			</div>
		</el-dialog>

	</section>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				sels:[],
                searchForm: {
					keyword: ''
				},
                userProducts: [],
				total: 0,
				page: 1,
				listLoading: false,
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				verifyCodeDisable:false,
				editFormRules: {
					phone: [
						{ required: true, message: '请输入电话', trigger: 'blur' }
					],
					verifyCode:[
						{ required: true, message: '请输入验证码', trigger: 'blur' }
					]
					,
					consumnum:[
						{ required: true, message: '请输入消费次数', trigger: 'blur' }
					]
				},
				//编辑界面数据
				editForm: {
					id:null,
					phone: '',
					balancenum:0,
					consumnum:1,
					verifyCode:''
				}
			}
		},
		methods: {
			selsChange: function (sels) {
				this.sels = sels;
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getUserProducts();
			},
			//获取用户列表
			getUserProducts() {
				let para = {
					currentPage: this.page,
					keyword:this.searchForm.keyword
				};
				//打开加载的效果
				this.listLoading = true;
				//
				this.$http.post("/userProduct",para).then(res=>{
				    this.userProducts=res.data.data;
                    this.total=res.data.total;
                    //关闭加载的效果
                    this.listLoading = false;
				});
			},
			//显示新增界面
			handleConsum: function () {
			    //打开弹出框
				this.title='用户消费';
				if (this.sels==null || this.sels.length!=1){
					this.$message({
						message: '请选择要消费的那个服务后，再操作！',
						type: 'success'
					});
					return;
				}
				//如果用户选择就获取第一行
				this.editFormVisible = true;
				this.editForm = Object.assign({}, this.sels[0]);
			},
			getVerifyCode(){
				//1 判断手机号
				let phone = this.editForm.phone;
				if (!phone){
					this.$message({
						message: '请输入电话号码后，再操作！',
						type: 'success'
					});
					return;
				}

				//2灰化按钮
				this.verifyCodeDisable = true;
				//3发送获取请求
				//3.1 如果发送成功，提示成功，并倒计时解除灰化
				this.$http.post("/verifyCode/sms/product/consum?phone="+phone)
					.then(result=>{
						var ajaxResult = result.data;
						if(ajaxResult.success){
							this.$message({
								message: '手机验证码已经发送到您的手机，请在3分钟内使用！',
								type: 'success'
							});
							//3.1.发送成：倒计时
							var time = 60;

							let vueObj = this;
							var interval = window.setInterval( function () {
								//每一条倒计时减一
								time = time - 1 ;

								//把倒计时时间搞到按钮上

								//3.2.倒计时完成恢复按钮
								if(time <= 0){
									vueObj.verifyCodeDisable = false;
									//清除定时器
									window.clearInterval(interval);
								}
							},1000);
						}else{
							//3.3.发送失败：提示，恢复按钮
							this.verifyCodeDisable = false;
							this.$message({
								message: "发送失败:"+ajaxResult.message,
								type: 'error'
							});
						}
					})
					.catch(result=>{
						this.$message({
							message: '系统异常！',
							type: 'error'
						});
					})





			},
			//编辑
			consumProdut: function () {
			    //验证当前的表单是否符合验证规则
				this.$refs.editForm.validate((valid) => {

					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							let para = Object.assign({}, this.editForm);

							this.$http.post('/userProduct/consum',para).then((res) => {
                                this.editLoading = false;
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                //重置表单-调用现成的方法
								this.$refs['editForm'].resetFields();
								//关闭 加载框
								this.editFormVisible = false;
								//重新刷新页面数据
								this.getUserProducts();
							});
						});
					}
				});
			}
		},
		mounted() {
		    //当页面加载完以后。执行的方法
			this.getUserProducts();
		}
	}

</script>

<style scoped>

</style>